<template>
  <div class="geoPositionWrap">
    <div id="map" style="width: 100%; height: 100%"></div>

    <div class="btttn">
      <span v-if="zhankai" class="chakan" @click="clicknone"
        ><van-icon name="arrow-down" />展开地图</span
      >
      <span v-else class="chakan" @click="clicknoneshousuo"
        ><van-icon name="arrow-up" />收缩地图</span
      >
  
    </div>
    <div class="tuceng" @click="tucengclick">
      <img
        style="width: 25px;height: 25px;"
        src="../../assets/liveData/tuceng.png"
        alt=""
      />
      图层
    </div>
   
    <popup
      v-if="showpopul == true"
      @close="showpopul = false"
      @huanhu="huanhu"
    ></popup>
  </div>
</template>

<script type="text/javascript">
import { Cascader, Field, Popup, Toast } from 'vant'
import popup from '../../components/popup/index.vue'
import Vue from 'vue'
import TransformationApi from '../../service/power.js'
Vue.use(Cascader)
Vue.use(Field)
Vue.use(Popup)
Vue.use(Toast)
export default {
  data() {
    return {
      factorIndex: -1,
      index: 0,

      cityName: '',
      popupDOM: null,
      longAndLati: {
        lapsXcoordinate: '',
        lapsYcoordinate: '',
      },
      show: false,
      fieldValue: '',
      cascaderValue: '',
      options: [],
      maplist: [],
      fieldNames: '',
      popupItem: {},
      styleData: 'aegis://styles/aegis/Streets',
      intervalId: null,
      map: null,
      factorIndex: 0,
      timer: '',
      zhankai: false,
      value: 0,
      list2: [],
      value1: '',
      listchild: [],
      showpopul: false,
    }
  },

  watch: {
    location(newVal, oldVal) {
      // newVal 表示变化后的值
      // oldVal 表示变化前的值
  
      map.setCenter(this.location)
    },
  },
  props: {
    location: {
      type: Array,
      default: Array,
    },
    paramsName:{
      type:String,
      default: String,
    }
  },
  mounted() {
  
    if (this.$store.getters.location.length > 0) {
      this.cityName = this.$store.getters.location[
        this.$store.getters.location.length - 2
      ].name
    }

    //初始化经纬度
    this.longAndLati.lapsXcoordinate = Number(
      this.$store.getters.cityLongAndLati[0]
    )
    this.longAndLati.lapsYcoordinate = Number(
      this.$store.getters.cityLongAndLati[1]
    )

    this.initMap('aegis://styles/aegis/Streets-v2')
  },

  created() {
    TransformationApi.Querytheline().then((res) => {
          
        
        })
  },
  computed: {
    cityLongAndLati() {
      return this.$store.getters.cityLongAndLati
  
    },
  },
  watch: {
    cityLongAndLati() {
      // this.initMap(this.cityLongAndLati);
    },
  },
  components: {
    popup,
  },
  inject: ['reload'],

  methods: {
    onStartDraw() {
      //框选工具开启后的操作方式为：1.点击地图确定第一个点，2.移动鼠标改变矩形大小,3.点击鼠标确定第二个点
      //   selectTool.enable()
    },
    initMap(style) {
      var _this =this
      mapOptions = {
        style: style,

        // zoom: 5.6,
        // center: {lng: 109.4471291388071, lat: 35.07028691090167},
        zoom: 10, //23,
        center: {
          lng: this.longAndLati.lapsXcoordinate,
          lat: this.longAndLati.lapsYcoordinate,
        },
        // center: {
        //   lng: 112.55051672458649,
        //   lat: 37.87056591573119,
        // },

        maxZoom: 23.5,
      }

      //雪碧图和描述文件的路径
      let resPath = location.pathname.split('/')
      resPath.pop()
      resPath = resPath.join('/')
      let spritePath =
        location.origin +
        resPath +
        '/static/example/example/assets/tileExt/sprite'

      //切片图层的样式
      gridTileExtLayerOptions = {
        urls: ['http://172.20.50.48:21100'+ '/mapservice/mapexport/vectile/{z}/{x}/{y}.sg'],
        // urls: ['http://27.196.200.206:21040/tiles/vectorserver/pbf'],
        layerConf: layerJson,
        spriteUrl: spritePath,
        sourceOptions: {
          maxzoom: 22,
        },
      }

      /**
       * 添加设备并高亮
       */

      function initPage() {
        initGridTileExtLayer()

        // _this.$util.initLayer('山西省', map)
        // _this.$util.search('山西省', map)
        initSelectTool()

        map.on('click', function(e) {
          if(_this.paramsName!=''){
            selectTool.enable()
          }
       
          // selectTool.disable(true)
       
        })

        TransformationApi.Querytheline().then((res) => {
       
      
         if( Array.isArray(res.data)){
           return
         }
          var hlTool
          let testDatas = []
          var a = res.data.filter((it) => {
            return it.properties.oid != undefined
          })
          a.forEach((it) => {
            var symbol = new egisV2.symbol.EleLineSymbol({
              type: 'line', //类型point or line or fill
              devId: it.properties.oid, //oid，psrid
              devTypeId: it.properties.sbzlx, //设备类型
              symbolId: '420', //符号ID
              symbolWidth: 30, //线宽
              symbolHeight: 100,
              symbolColor: '#ff0000', //颜色

              symbolOpacity: 0.1, //透明度
              symbolSize: 32, //大小
              coordinates: it.geometry.coordinates,
              attributes: { a: 1, b: 2 }, //其它信息
            })
            testDatas.push(symbol)
          })

          hlTool = new egisV2.tool.HighLightTool(map, {
            color: '#ff0000',
            speed: 2,
            maxOpacity: 1,
            minOpacity: 0.2,
          })
          map.setZoom(20)

          // get(msServiceUrl + '/resourcemgrservice/toolbox/10000100').then(
          //   (res) => {
          //     console.log(res, '哈哈哈')
          //   }
          // )
          hlTool.setSpeed(5)
          hlTool.setDatas(testDatas, true, false)
        })
   
        //设置闪烁速度
      }
     
      loadGeoMap_ms(initPage)
    },
    clicknone() {
      this.zhankai = false
      this.$emit('closrbtn1')
    },
    clicknoneshousuo() {
      this.zhankai = true
      this.$emit('closrbtn')
    },
    rerenderGrid() {
      if (map.style._loaded) {
        clearInterval(this.intervalId)
        //20210917 这里要新增这句来恢复用户创建的Layer对象的基线图层，不然会出错

        map.reloadUserLayer()
        initGridTileExtLayer()
      }
    },
    //当调用map.setStyle()时，通过map.isStyleLoaded()方法来获取样式是否加载完成，当样式加载完成后，清除定时器并刷新用户图层
    onSetMapStyle(style) {
      if (this.$oncestyleData != style) {
        this.styleData = style
        map.setBaseStyle(this.styleData)
        this.intervalId = setInterval(() => {
          this.rerenderGrid()
        }, 500)
      }
    },

    goUrl() {
      this.reload()
    },
    onChange({ value }) {
      this.value1 = value
      //     var a = this.$util.getimage(value)
      //  console.log(a,'0000000000000');
      this.options.forEach((it) => {
        if (value === it.value) {
          var list = this.$util.Featuretype1(value)

          list = list.map((is) => {
            return { value: is.typeid, text: is.typealias }
          })

          // listchild = listchild.map((is) => {
          //   return { value: is.typeid, text: is.typealias };
          // });

          it.children = list
        }
      })
    },
    onFinish({ selectedOptions }) {
      // if (
      //   Object.prototype.toString.call(this.listchild) === "[object Object]" &&
      //   this.listchild.success
      // ) {
      //   return Toast(this.listchild.message);
      // } else {
      selectedOptions[0].children.forEach((i) => {
        if (i.value == this.value1) {
          // var a =                 this.$util.getdianya(i.value)
          //    console.log(a);

          this.listchild = this.$util.Genericfeaturequeries(i.value)

          if (
            Object.prototype.toString.call(this.listchild) ===
              '[object Object]' &&
            this.listchild.success
          ) {
            return Toast(this.listchild.message)
          }

          if (
            this.listchild.length == 0 ||
            this.listchild == undefined ||
            this.listchild[0].map[selectedOptions[1].value].length == 0
          ) {
            Toast('暂无数据！')
          } else {
            this.drawLine(selectedOptions, i.text)
            this.show = false
          }
        }
      })
      // }

      this.fieldValue = selectedOptions.map((option) => option.text).join('/')
    },
    tucengclick() {
      this.showpopul = true
    },
    changeFactor(index) {
      this.factorIndex = index
    },
    huanhu(style) {
      map.setBaseStyle(style)

      // rerenderGrid()
    },
  },
}
</script>
<style type="text/css" lang="less" scoped>
@keyframes myAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
/deep/ .van-icon {
  font-size: 18px;
}
.tuceng {
  position: absolute;
  width: 40px;
  display: flex;
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  padding: 4px;
  height: 40px;
  right: 15px;
  top: 16%;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
  border-radius: 5px;
}
.chakan {
  width: 100px;
  height: 30px;
  float: left;
  text-align: center;
  line-height: 30px;
  box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.5);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}
.geoPositionWrap {
  position: relative;
  width: 100%;
  height: 100%;
}
/deep/ .sgmap-canvas {
  height: 100% !important;
}
.bottom {
  width: 80px;

  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  background-color: #fff;
  position: absolute;
  right: 10px;
  bottom: 120px;
  z-index: 9999999999;
}
/deep/ .van-button--normal {
  padding: 0 10px;
  font-size: 14px;
  height: 25px;
  margin-left: 3px;
}
.center1 {
  position: absolute;
  bottom: 160px;
  right: 10px;
  width: 170px;
  height: 180px;
  background-color: #fff;
}
.btttn {
  position: absolute;
  top: 10px;
  right: 0;
  text-align: right;
  font-size: 17px;
  width: 100%;
}

.typeLineNew {
  top: 23%;
  right: 16px;
}
</style>
